<style>
    .both {
        clear:both;
    }
    
    .warcraft {
        color: #ffffff;
    }

    .warcraft.left {
        width: 110px;
        float: left;
        color: #fefefe;
        margin-top: 5px;
        margin-left: 140px;
        font-weight: bold;
    }
    
    .warcraft.right {
        width: 200px;
        float: left;

    }
    
    #race {
        width: 250px;
    }
    
    .warcraft.map {
        background: #fefefe;
        margin-top: 3px;
        margin-bottom: 2px;
        margin-left: 1px;
        padding: 2px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        color: #000;
    }
    .warcraft.map.close {
        float: right;
        margin-top: -2px;
        cursor: pointer;
    }
    
    .warcraft.allmaps {
        display: none; 
        cursor: pointer;
    }
    
    .warcraft.newmap {
        cursor: pointer;
/*        display: none;*/
    }
    
    #addmap {
        color: #ffffff;
        cursor: pointer;
    }
    
    .hide{
        display: none;
    }
    .selected{
        background-color: #444;
        
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        width: 140px;
    }
</style>
<script type="text/javascript" src="./js/jquery.js"></script> 
<script type="text/javascript">
    
    $('')
    $(document).ready(function(){
//       //=======================================================================
       $("#submit").click(function(){
           $('.warcraft.map').each(function() {
               if(!$(this).hasClass('hide')) {
                   var id = $(this).attr('id');
                   id = id.replace(/list/,'');
                   if(id) $("#warForm").append('<input type="hidden" name="maps[]" value="'+id+'">');
               }
            });
       });
//       //=======================================================================
//       $('.warcraft.map.close').click(function() {
//           $(this).toggleClass('hide');
//          $('.warcraft.newmap').after('<div class="warcraft map">Twisted Meadows<span id="3" class="warcraft map close">[x]</span></div>')
////          $(this).parent().remove();
//       });
//       //=======================================================================
         $('.warcraft.newmap').each(function(index, item) {
//            console.log(item);
              $(this).click(function(){
                    
//                            console.log($(this).parent());
              });
              
            });

       $('#addmap').click(function(){
         
//          alert('1');
          $('#newmaps').toggleClass('hide');
       });
       
//       $('.warcraft.map').click(function(){
//            $(this).toggleClass('selected');
//       });
       
       $('.warcraft.newmap').click(function(){
           var id = $(this).children('span').attr('id');
           id = id.replace(/map/,'');
           $('#list'+id).toggleClass('hide');
//           $(this).toggleClass('selected');
           
       });
       

//       //=======================================================================
//      $('.warcraft.newmap').live('click', function(){
//          $('#after').after('<div class="warcraft map">'+$(this).text()+'<span id="'+$(this).attr('id')+'" class="warcraft map close">[x]</span></div>');
//          $(this).remove();
//       });
    });
</script>

<div class="warcraftForm" id="formWarcraft">
    <form action="/warcraft" id="warForm"
          method="<?= $this->element->getMethod() ?>" >
        
        <?= $this->element->userId?>
        <dd>
            <dt class="group">

            <div class="warcraft left">Ник в Garena</div><div class="warcraft right"><?= $this->element->garena ?></div><br class="both"/>
            <div class="warcraft left">Любимая раса</div><div class="warcraft right"><?= $this->element->race ?></div><br class="both"/>
            <div class="warcraft left">Карты</div>
               <div class="warcraft right">
                <?if($this->maps) :?>
                    <?foreach($this->allmaps as $oneMap):?>
                            
                            <div id="list<?=$oneMap->getWarId();?>"class="warcraft map<? if(!in_array($oneMap, $this->maps)):?> hide<?endif;?>"><?=$oneMap->getTitle();?><span  class="warcraft map close">[x]</span></div>
                            
                    <?endforeach;?>
                <?endif; ?>
            <div id="after">
                <div class="warcraft left"></div><div class="warcraft right"><a id="addmap">Добавить карту</a></div><br class="both"/>
                <div id="newmaps">
                    <?if($this->allmaps) :?>
                        <?foreach($this->allmaps as $oneMap):?>
                    
                    <div class="warcraft newmap <?if(in_array($oneMap, $this->maps)):?>hide<?endif;?>"><?=$oneMap->getTitle();?><span id="map<?=$oneMap->getWarId();?>"></span></div>
                        <?endforeach;?>
                    <?endif; ?>
                </div>
            </div>   
            
            </div><br class="both"/>
            
                
            <div class="warcraft left">&nbsp;</div><div class="warcraft right"><?= $this->element->submit ?></div>
            </dt>
            
            <dt class="group">
                <span class="float-r button">
                
                </span> 
            </dt> 
        </dd> 
    </form>
</div>